CSS 伪规则：使用 CSS 测试替身进行稳健测试

测试级联样式表（CSS）是 Web 开发中一项具有挑战性但必不可少的工作。传统的测试方法常常难以有效隔离 CSS 代码并验证其行为。这时，“CSS 伪规则”，或者更准确地说，CSS 测试替身的概念就派上用场了。本文将深入探讨使用测试替身进行 CSS 测试的世界，探讨它们的优势、实现技术以及在不同浏览器和设备上创建稳健且可维护样式表的最佳实践。

什么是 CSS 测试替身？

在软件测试中，测试替身是指在测试过程中代表真实对象的任何对象的通用术语。使用测试替身的目的是隔离被测单元并控制其依赖项，从而使测试更具可预测性和焦点。在 CSS 的背景下，测试替身（为简单起见，我们称之为“CSS 伪规则”）是一种创建人工 CSS 规则或行为的技术，这些规则或行为模仿真实的事物，使您能够验证 JavaScript 或其他前端代码是否按预期与 CSS 交互，而无需依赖实际的渲染引擎或外部样式表。

本质上，它们是模拟的 CSS 行为，用于测试组件交互并在测试期间隔离代码。这种方法允许对依赖于特定 CSS 样式或行为的 JavaScript 组件或其他前端代码进行集中的单元测试。

为什么要使用 CSS 测试替身？

将 CSS 测试替身纳入您的测试策略会带来几个关键优势：

隔离：测试替身使您能够将正在测试的代码与浏览器渲染引擎和外部 CSS 样式表的复杂性隔离开来。这使得您的测试更加集中，并且不易受到外部因素造成的误报或漏报的影响。
速度：针对真实浏览器渲染运行测试可能速度缓慢且资源消耗大。测试替身是轻量级模拟，可显著加快测试套件的执行速度。
可预测性：浏览器不一致性和外部样式表更改可能导致测试不可靠。测试替身提供了一个一致且可预测的环境，确保您的测试仅在被测代码存在错误时才会失败。
控制：测试替身使您能够控制 CSS 环境的状态，从而可以测试在真实浏览器环境中难以或不可能重现的不同场景和边缘情况。
早期错误检测：通过模拟 CSS 行为，您可以在开发过程早期发现前端代码与 CSS 交互方面的问题。这可以防止错误进入生产环境并减少调试时间。

CSS 测试替身类型

虽然“CSS 伪规则”一词被广泛使用，但在 CSS 测试中可以采用不同类型的测试替身：

存根（Stubs）：存根为测试期间的调用提供预设的答案。在 CSS 测试中，存根可能是当调用时返回预定义 CSS 属性值的函数。例如，当被询问元素的 `margin-left` 属性时，存根可以返回 `20px`。
模拟（Mocks）：模拟比存根更复杂。它们允许您验证是否已使用特定参数调用了特定方法。在 CSS 测试中，模拟可能用于验证在单击按钮时 JavaScript 函数是否正确地将元素的 `display` 属性设置为 `none`。
假实现（Fakes）：假实现是可以工作的实现，但通常会采取一些快捷方式，使其不适用于生产环境。在 CSS 测试中，这可能是一个简化的 CSS 解析器，它只处理 CSS 功能的子集，或者一个模拟 CSS 布局行为的虚拟元素。
间谍（Spies）：间谍会记录函数或方法被调用方式的信息。在 CSS 测试中，间谍可用于跟踪在测试期间访问或修改特定 CSS 属性的次数。

实现技术

根据您的测试框架和正在测试的 CSS 的复杂性，可以使用多种技术来实现 CSS 测试替身。

1. 基于 JavaScript 的模拟

这种方法涉及使用 JavaScript 模拟库（例如 Jest、Mocha、Sinon.JS）来拦截和操作与 CSS 相关的函数或方法。例如，您可以模拟 `getComputedStyle` 方法以返回预定义的 CSS 属性值。JavaScript 代码通常使用此方法在浏览器应用样式后检索元素的样式值。

示例（使用 Jest）：


const element = document.createElement('div');

const mockGetComputedStyle = jest.fn().mockReturnValue({
  marginLeft: '20px',
  backgroundColor: 'red',
});

global.getComputedStyle = mockGetComputedStyle;

// 现在，当 JavaScript 代码调用 getComputedStyle(element) 时，它将收到模拟的值。

//测试示例

expect(getComputedStyle(element).marginLeft).toBe('20px');
expect(getComputedStyle(element).backgroundColor).toBe('red');

说明：

我们使用 `jest.fn()` 创建了一个模拟函数 `mockGetComputedStyle`。
我们使用 `mockReturnValue` 来指定模拟函数被调用时应返回的值。在这种情况下，它返回一个模拟 `getComputedStyle` 返回值的对象，其中包含预定义的 `marginLeft` 和 `backgroundColor` 属性。
我们将全局 `getComputedStyle` 函数替换为我们的模拟函数。这确保了在测试期间调用 `getComputedStyle` 的任何 JavaScript 代码实际上都会调用我们的模拟函数。
最后，我们断言调用 `getComputedStyle(element).marginLeft` 和 `getComputedStyle(element).backgroundColor` 会返回模拟的值。

2. CSS 解析和操作库

像 PostCSS 或 CSSOM 这样的库可用于解析 CSS 样式表并创建 CSS 规则的内存表示。然后，您可以操作这些表示来模拟不同的 CSS 状态并验证您的代码是否响应正确。这对于测试与动态 CSS 的交互特别有用，其中样式由 JavaScript 添加或修改。

示例（概念）：

假设您正在测试一个在单击按钮时在元素上切换 CSS 类的组件。您可以使用 CSS 解析库来：

解析与您的组件关联的 CSS 样式表。
查找与正在切换的 CSS 类对应的规则。
通过修改样式表的内存表示来模拟该类的添加或删除。
验证您的组件行为是否根据模拟的 CSS 状态进行了相应更改。

这避免了依赖浏览器将样式应用于元素的需要。这使得测试更快、更隔离。

3. Shadow DOM 和隔离样式

Shadow DOM 提供了一种将 CSS 样式封装在组件内的机制，防止它们泄露并影响应用程序的其他部分。这有助于创建更隔离和可预测的测试环境。如果组件使用 Shadow DOM 封装，您可以更轻松地控制在测试中应用于该特定组件的 CSS。

4. CSS Modules 和原子化 CSS

CSS Modules 和 Atomic CSS（也称为函数式 CSS）是促进模块化和可重用的 CSS 架构。它们还可以通过使识别和隔离影响特定组件的特定 CSS 规则变得更容易来简化 CSS 测试。例如，使用 Atomic CSS，每个类代表一个 CSS 属性，因此您可以轻松地模拟或存根单个类的行为。

实际示例

让我们探讨一些 CSS 测试替身在不同测试场景中的实际用法示例。

示例 1：测试模态框组件

考虑一个模态框组件，它通过向其容器元素添加 `show` 类来显示在屏幕上。`show` 类可能定义了将模态框置于屏幕中央并使其可见的样式。

要测试此组件，您可以使用模拟来模拟 `show` 类的行为：


// 假设我们有一个函数，它在模态元素上切换“show”类
function toggleModal(modalElement) {
  modalElement.classList.toggle('show');
}

// 测试
describe('Modal Component', () => {
  it('should display the modal when the show class is added', () => {
    const modalElement = document.createElement('div');
    modalElement.id = 'myModal';

    // 模拟 getComputedStyle，当存在“show”类时返回特定值
    const mockGetComputedStyle = jest.fn((element) => {
      if (element.classList.contains('show')) {
        return {
          display: 'block',
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
        };
      } else {
        return {
          display: 'none',
        };
      }
    });

    global.getComputedStyle = mockGetComputedStyle;

    // 最初，模态框应隐藏
    expect(getComputedStyle(modalElement).display).toBe('none');

    // 切换“show”类
    toggleModal(modalElement);

    // 现在，模态框应显示
    expect(getComputedStyle(modalElement).display).toBe('block');
    expect(getComputedStyle(modalElement).position).toBe('fixed');
    expect(getComputedStyle(modalElement).top).toBe('50%');
    expect(getComputedStyle(modalElement).left).toBe('50%');
    expect(getComputedStyle(modalElement).transform).toBe('translate(-50%, -50%)');
  });
});

说明：

我们创建了 `getComputedStyle` 的模拟实现，它会根据元素上是否存在 `show` 类返回不同的值。
我们使用一个虚构的 `toggleModal` 函数来切换模态框上的 `show` 类。
我们断言，当添加 `show` 类时，模态框的 `display` 属性从 `none` 变为 `block`。我们还检查了定位，以确保模态框正确居中。

示例 2：测试响应式导航菜单

考虑一个响应式导航菜单，它根据屏幕尺寸改变其布局。您可以使用媒体查询来为不同的断点定义不同的样式。例如，移动菜单可能隐藏在汉堡包图标后面，并且仅在单击图标时显示。

要测试此组件，您可以使用模拟来模拟不同的屏幕尺寸并验证菜单是否按预期运行：


// 模拟 window.innerWidth 属性以模拟不同的屏幕尺寸
const mockWindowInnerWidth = (width) => {
  global.innerWidth = width;
  global.dispatchEvent(new Event('resize')); // 触发 resize 事件
};


describe('Responsive Navigation Menu', () => {
  it('should display the mobile menu when the screen size is small', () => {
    // 模拟小屏幕尺寸
    mockWindowInnerWidth(600);

    const menuButton = document.createElement('button');
    menuButton.id = 'menuButton';
    document.body.appendChild(menuButton);
    const mobileMenu = document.createElement('div');
    mobileMenu.id = 'mobileMenu';
    document.body.appendChild(mobileMenu);

    const mockGetComputedStyle = jest.fn((element) => {
      if(element.id === 'mobileMenu'){
          return {
            display: (global.innerWidth <= 768) ? 'block' : 'none'
          };
      } else {
        return {};
      }
    });
    global.getComputedStyle = mockGetComputedStyle;
    // 断言移动菜单最初已显示（假设初始 CSS 设置在 768px 以上为 none）
    expect(getComputedStyle(mobileMenu).display).toBe('block');

  });

  it('should hide the mobile menu when the screen size is large', () => {
    // 模拟大屏幕尺寸
    mockWindowInnerWidth(1200);
    const menuButton = document.createElement('button');
    menuButton.id = 'menuButton';
    document.body.appendChild(menuButton);
    const mobileMenu = document.createElement('div');
    mobileMenu.id = 'mobileMenu';
    document.body.appendChild(mobileMenu);

    const mockGetComputedStyle = jest.fn((element) => {
      if(element.id === 'mobileMenu'){
          return {
            display: (global.innerWidth <= 768) ? 'block' : 'none'
          };
      } else {
        return {};
      }
    });
    global.getComputedStyle = mockGetComputedStyle;
    // 断言移动菜单已隐藏
    expect(getComputedStyle(mobileMenu).display).toBe('none');
  });
});

说明：

我们定义了一个 `mockWindowInnerWidth` 函数，通过设置 `window.innerWidth` 属性并触发 `resize` 事件来模拟不同的屏幕尺寸。
在每个测试用例中，我们使用 `mockWindowInnerWidth` 模拟特定的屏幕尺寸。
然后，我们根据模拟的屏幕尺寸断言菜单是显示还是隐藏，从而验证媒体查询是否正常工作。

最佳实践

为了最大限度地提高 CSS 测试替身的有效性，请考虑以下最佳实践：

专注于单元测试：主要将 CSS 测试替身用于单元测试，您希望在此类测试中隔离单个组件或函数并验证其行为。
保持测试简洁且专注：每个测试都应专注于组件行为的单一方面。避免创建过于复杂的测试，试图一次验证太多内容。
使用描述性的测试名称：使用清晰且描述性的测试名称，准确反映测试的目的。这使得理解测试正在验证的内容更加容易，并有助于调试。
维护测试替身：使您的测试替身与实际 CSS 代码保持同步。如果您更改了 CSS 样式，请务必相应地更新您的测试替身。
平衡端到端测试： CSS 测试替身是一个有价值的工具，但不应孤立使用。通过在真实浏览器环境中验证应用程序的整体行为的端到端测试来补充您的单元测试。Cypress 或 Selenium 等工具在此方面非常有价值。
考虑视觉回归测试：视觉回归测试工具可以检测由 CSS 修改引起的意外视觉变化。这些工具会捕获您的应用程序的屏幕截图，并将其与基线图像进行比较。如果检测到视觉差异，工具会提醒您，使您能够进行调查并确定更改是故意的还是错误的。

选择合适的工具

有几种测试框架和库可用于实现 CSS 测试替身。一些流行的选择包括：

Jest：一个流行的 JavaScript 测试框架，具有内置的模拟功能。
Mocha：一个灵活的 JavaScript 测试框架，可以与各种断言库和模拟工具一起使用。
Sinon.JS：一个独立的模拟库，可以与任何 JavaScript 测试框架一起使用。
PostCSS：一个强大的 CSS 解析和转换工具，可用于在测试中操作 CSS 样式表。
CSSOM：一个用于处理 CSSOM（CSS 对象模型）表示的 CSS 样式表的 JavaScript 库。
Cypress：一个端到端测试框架，可用于验证应用程序的整体视觉外观和行为。
Selenium：一个流行的浏览器自动化框架，通常用于视觉回归测试。

结论

CSS 测试替身，或者正如我们在本指南中称之为“CSS 伪规则”，是提高样式表质量和可维护性的强大技术。通过提供一种在测试期间隔离和控制 CSS 行为的方法，CSS 测试替身使您能够编写更集中、更可靠、更高效的测试。无论您是构建小型网站还是大型 Web 应用程序，将 CSS 测试替身纳入您的测试策略都可以显著提高前端代码的稳健性和稳定性。请记住将它们与其他测试方法（如端到端测试和视觉回归测试）结合使用，以实现全面的测试覆盖。

通过采纳本文概述的技术和最佳实践，您可以构建一个更健壮、更易于维护的代码库，确保您的 CSS 样式在不同的浏览器和设备上都能正常工作，并且您的前端代码能够按预期与 CSS 进行交互。随着 Web 开发的不断发展，CSS 测试将变得越来越重要，掌握 CSS 测试替身的艺术将是任何前端开发人员的宝贵技能。